<template>
  <div class="choose-tab" :class="[chooseTabClassName]">
    <span class="u-btn">
      <i class="message">{{chooseTabName}}</i>
      <i class="present"></i>
    </span>
  </div>
</template>
<script>
export default {
  name: 'chooseTab',
  props: {
    chooseTabName: {
      type: [Number, String],
      required: true
    },
    chooseTabClassName: {
      type: [Object, String],
      default: ''
    }
  },
  data () {
    return {
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
  .choose-tab{
    width: 100%;
    height: 100%;
    &.choosed{
      >.u-btn{
        background-image: url(./../../assetsManagement/assets/images/select-on.png);
        >.present{
          display: block;
        }
      }
    }
    >.u-btn {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      color: #fff;
      background: url(./../../assetsManagement/assets/images/select-un.png) no-repeat center center;
      background-size: 100%;
      cursor: pointer;
      vertical-align: top;
      >.message {
        display: inline-block;
        line-height: 30px;
      }
      >.present {
        width: 26px;
        height: 26px;
        display: none;
        position: absolute;
        left: 50%;
        top: 18px;
        transform: translateX(-50%);
        z-index: 20;
        background: url(./../../assetsManagement/assets/images/present.png) no-repeat center;
        background-size: 100%;
      }
    }
  }
</style>
